<template>
	<view class="page">
		<view class="order">
			<view class="top_info">
				<!-- #ifdef APP-PLUS -->
				<view class="status_bar"></view>
				<!-- #endif -->
				<view class="flex top_title flex_col_center">
					<view class="name">订单</view>
					<view class="flex-middle" @click="show = true" v-if="userList.length>0">
						<image src="../../static/image/order_user.png" class="icon_user" mode=""></image>
						<text class="account">{{userInfo.userName}}</text>
						<image class="icon_right" src="../../static/image/order_right.png" mode=""></image>
					</view>
				</view>

				<view class="padding">
					<my-search from="order" :notTop="true"></my-search>
				</view>

				<u-tabs :list="stateList" :current="tabIndex" @change="change" bg-color="none" inactive-color="black"
					active-color="#0eaa78"></u-tabs>
			</view>
			<view class="all_order">
				<div class="scroll_height">
					<view class="sign_order" v-for="(item) in dataList" @click="toDetail(item.id)" :key="item.id">
						<my-orderlist :item="item" @clickbtn="btnAction"></my-orderlist>
					</view>
				</div>
				<view class="nodata" v-if="dataList.length==0">
					<image :src="nodataImg" mode="aspectFit"></image>
					<view>暂时还没有此类订单~</view>
				</view>
			</view>
		</view>
		<u-select v-model="show" :list="userList" @confirm="selectUser" value-name="id" label-name="nickname">
			<text class="custom-icon custom-icon-yonghu"></text>
		</u-select>

		<my-tabar ref="tabar" current="2"></my-tabar>
	</view>
</template>

<script>
	let app = getApp();
	import {
		$https
	} from '@/static/js/request.js';
	export default {
		data() {
			return {
				nodataImg: getApp().globalData.nodataImg,
				show: false,
				tabIndex: app.globalData.tabIndex,
				stateList: [{
						name: "全部",
					},
					{
						name: "待审核",
					},
					{
						name: "备货中",
					},
					{
						name: "配送中",
					},
					{
						name: "已完成",
					},
					// {name: "已取消",},
				],
				userList: [], //用户列表
				userInfo: {
					userId: null, //选择的用户id
					userName: null, //选择的用户名
				},
				dataList: [],
				count: null,
				page: 1,
				flag: true,
			};
		},
		onReady() {
			getApp().setTitle()
		},
		onShow() {
			if (!uni.getStorageSync("copartner_token")) {
				uni.redirectTo({
					url: '/pages/account/login'
				});
			} else {
				uni.$once('updateorder', res => {
					// console.log(res)
					if (res) {
						this.tabIndex = res.id;
						// console.log(app.globalData.tabIndex)
						this.getData(1)
					}
					this.flag = false;
				})
				if (this.flag) {
					this.getData(1);
				}
			}
			this.flag = true;
		},

		methods: {
			getData(page, change, params) {
				if (page == 1) {
					this.dataList = [];
					this.count = null;
				}
				var params = {
					size: 10,
					page: page,
				}
				if (this.userInfo.userId) {
					Object.assign(params, {
						zid: this.userInfo.userId
					})
				}
				if (app.globalData.tabIndex != 0) {
					//为0 不传
					Object.assign(params, {
						order_status: app.globalData.tabIndex - 1
					})
				}
				$https('GET', 'getOrderList', params, res => {
					if (res.data.errcode == 0) {
						// console.log(res.data.data.all_cart_num,'11')
						this.$refs.tabar.changetag(res.data.data.all_cart_num);
						var list = res.data.data.list;
						for (let i in list) {
							var ms1 = Number(list[i].created_at + '000');
							list[i].createdTime = this.timestampToDate(ms1);
						}
						if (change) {
							this.dataList = list;
						} else {
							this.dataList = this.dataList.concat(list);
						}
						this.count = res.data.data.count;
						this.page = page;
						this.userList = res.data.data.zi_list ? res.data.data.zi_list : [];
						if (!this.userInfo.userId && this.userList.length > 0) {
							this.userInfo.userName = res.data.data.zi_list[0].nickname;
						}
					} else {
						uni.showToast({
							title: res.data.errmsg,
							icon: 'none'
						});
					}
				})
			},

			timestampToDate(ms) {
				var now = new Date();
				now.setTime(ms);
				var date = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate() + ' ' + now.getHours() +
					':' + now.getMinutes() +
					':' + now.getSeconds()
				return date;
			},
			change(index) {
				app.globalData.tabIndex = index;
				// console.log(app.globalData.tabIndex)
				this.tabIndex = app.globalData.tabIndex;
				this.dataList = [];
				this.count = null;
				this.page = 1;
				this.getData(1)
			},
			//选择用户
			selectUser(data) {
				this.userInfo.userId = data[0].value == this.userList[0].id ? null : data[0].value;
				this.userInfo.userName = data[0].label;
				this.getData(1, true)
			},
			//按钮事件
			btnAction(option) {
				var type = option.type,
					id = option.id,
					msg = option.msg;
				if (type == 'getOrderDetail') {
					uni.navigateTo({
						url: `/pages/user/return_goods/return_list?id=${id}`
					});
				}
				if (type == 'toPay') {
					uni.navigateTo({
						url: `/pages/shopcart/pay_for?id=${id}`
					});
				} else if (type == "getLogistics") {
					// #ifdef H5
					uni.navigateTo({
						url: `/pages/order/checkLog-h5?id=${id}`
					});
					// #endif
					// #ifndef H5
					uni.navigateTo({
						url: `/pages/order/checkLog-wx?id=${id}`
					});
					// #endif
				} else {
					uni.showModal({
						content: `是否${msg}`,
						confirmColor: '#4FA388',
						success: (res) => {
							if (res.confirm) {
								$https('GET', type, {
									oid: id
								}, res => {
									if (res.data.errcode == 0) {
										if (type == 'onceAgain') {
											//如果是再来一单，直接跳转到购物车
											uni.switchTab({
												url: '/pages/tabar/shopcart'
											});
										} else {
											this.getData(1);
										}
									} else {
										uni.showToast({
											title: res.data.errmsg,
											icon: 'none'
										});
									}
								})
							} else if (res.cancel) {
								// console.log('用户点击取消');
							}
						}
					});
				}
			},

			toDetail(id) {
				uni.navigateTo({
					url: `/pages/order/detail?id=${id}`
				});
			},
		},
		onReachBottom() {
			var page = this.page;
			if (this.dataList.length < this.count) {
				page++;
				this.getData(page)
			}
		},
	};
</script>

<style lang="scss" scoped>
	.order .top_info .top_title {
		justify-content: space-between;
		padding: 24rpx 34rpx 14rpx;
		color: black;
		font-weight: bold;

		.name {
			font-size: 32rpx;
			padding-left: 20rpx;
		}
	}

	.order {
		.top_info {
			z-index: 99;
			position: fixed;
			left: 0;
			right: 0;
			// #ifdef APP-PLUS
			top: var(--status-bar-height);
			// #endif
			background: #F6F6F7;
		}

		.all_order {
			//#ifndef MP-WEIXIN
			padding-top: calc(var(--status-bar-height) + 320rpx);
			// #endif
			//#ifdef MP-WEIXIN
			padding-top: 320rpx;
			// #endif
			margin-bottom: 20rpx;
		}

		.success_pay {
			position: absolute;
			font-size: 92rpx;
			color: rgba(255, 0, 0, 0.1);
			transform: rotate(-22deg);
			margin-top: 40rpx;
		}

		.sign_order {
			background: $white;
			margin: 0rpx 34rpx;
			padding: 0 30rpx;
			border-radius: 20rpx;

			image {
				width: 112rpx;
				height: 80rpx;
				margin-right: 22rpx;
			}

			.order_number {
				height: 64rpx;
				line-height: 64rpx;

				border-bottom: 1px solid #ececec;
			}

			.order_info {
				flex-basis: 100%;

				>view {
					margin: 10rpx 0;
				}
			}
		}

		.sign_order:nth-child(n + 2) {
			margin-top: 20rpx;
		}

		//   .scroll_height {
		//     height: calc(100vh - 50px - 318rpx);
		//     /* #ifdef APP-PLUS */
		//     height: calc(100vh - 50px - 245rpx - var(--status-bar-height));
		//     /* #endif */
		//   }

		.select_button {
			padding: 26rpx 0;

			.another_order,
			.confirm_pay {
				border-color: #55a68c;
				color: #55a68c;
			}

			.look_logist,
			.cancel_order {
				color: #8f8f8f;
			}

			.confirm_good {
				color: #e53131;
			}
		}

		.select_button>text {
			border: 1px solid;
			padding: 8rpx 22rpx;
			margin-left: 24rpx;
			font-size: 24rpx;
			border-radius: 24rpx;
		}
	}

	.top_title {
		.icon_user {
			width: 26rpx;
			height: 30rpx;
		}

		.icon_right {
			width: 12rpx;
			height: 16rpx;
			margin-left: 10rpx;
		}

		.account {
			margin-left: 10rpx;
		}
	}




	// @media (max-width: 600px) {
	// 	/deep/ .search_style .search {

	// 		height: 80rpx;
	// 		margin: 28rpx 0 36rpx;
	// 	}

	// 	.order .order_info>view {
	// 		margin-top: 8rpx;
	// 	}

	// 	.order {
	// 		.account {
	// 			margin: 0 6rpx;
	// 		}

	// 		.top_info {
	// 			/deep/ .uicon-arrow-right {
	// 				height: 38rpx;
	// 				line-height: 38rpx;
	// 			}
	// 		}
	// 	}
	// }
</style>
